<template>
  <div>
    <div class="row">
      <div class="col-2">
        <p class="text-info text-center">当前第 {{index}} 首</p>
      </div>
      <div class="col-7">
        <h3 class="text-center mb-3 font-weight-bold word-width">
          <p>宋诗</p>
        </h3>
        <div>
          <h5 class="text-center mb-3 font-weight-bold word-width">
            <p>{{currMsg.title}}</p>
            <small class="text-muted font-italic">{{currMsg.author}}</small>
          </h5>
          <ul class="list-unstyled text-small text-center word-width">
            <li v-for="itm in currMsg.paragraphs">{{itm}}</li>
          </ul>
        </div>
      </div>
      <div class="col-3">
        <button type="button" class="btn btn-outline-primary" @click="prev()">上一首</button>
        <button type="button" class="btn btn-outline-primary" @click="next()">下一首</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'SongShi',
    data () {
      return {
        index: 1,
        currMsg: {},
        dataMsg: [
          {
            'title': '日詩',
            'author': '宋太祖',
            'paragraphs': [
              '欲出未出光辣達，千山萬山如火發。',
              '須臾走向天上來，逐却殘星趕却月。'
            ],
            'id': '08e41396-2809-423d-9bbc-1e6fb24c0ca1'
          },
          {
            'title': '句',
            'author': '宋太祖',
            'paragraphs': [
              '未離海底千山黑，纔到天中萬國明。'
            ],
            'id': 'adaa27a4-389b-48ca-8021-80f0471433c4'
          }
        ]
      }
    },
    computed: {
      dataMessage () {
        // let locale = window.localStorage.getItem('locale')
        // window.localStorage.setItem('locale', locale)
        return this.$store.getters.dataMsg
      }
    },
    watch: {
      dataMessage () {
        this.dataMsg = this.$store.getters.dataMsg
        if (this.dataMsg) {
          this.currMsg = this.dataMsg[this.index - 1]
        }
      }
    },
    mounted: function () {
      let songshiIndex = window.localStorage.getItem('songshi_index')
      if (songshiIndex) {
        this.index = songshiIndex % 1000
      } else {
        window.localStorage.setItem('songshi_index', 1)
      }
      if (!this.$store.getters.dataMsg) {
        this.changeUrl()
      }
    },
    methods: {
      changeUrl () {
        let url = null
        let urlIndex = 0
        let songshiIndex = window.localStorage.getItem('songshi_index')
        if (songshiIndex) {
          this.index = songshiIndex % 1000
        }
        if (this.index === 0) {
          urlIndex = (parseInt(songshiIndex / 1000) - 1) * 1000
        } else {
          urlIndex = parseInt(songshiIndex / 1000) * 1000
        }
        url = '/poet/poet.tang.' + urlIndex + '.json'
        this.queryDate(url)
      },
      queryDate: function (url) {
        this.$store.dispatch('loadDataMsg', url)
      },
      prev () {
        if (this.index > 1) {
          this.index -= 1
          let songshiIndex = parseInt(window.localStorage.getItem('songshi_index')) - 1
          window.localStorage.setItem('songshi_index', songshiIndex)
          this.currMsg = this.dataMsg[this.index - 1]
        } else {
          let songshiIndex = parseInt(window.localStorage.getItem('songshi_index'))
          if (songshiIndex > 1) {
            window.localStorage.setItem('songshi_index', songshiIndex - 1)
            this.index = 1
            this.changeUrl()
          }
        }
      },
      next () {
        if (this.index < this.dataMsg.length) {
          this.index += 1
          let songshiIndex = parseInt(window.localStorage.getItem('songshi_index')) + 1
          window.localStorage.setItem('songshi_index', songshiIndex)
          this.currMsg = this.dataMsg[this.index - 1]
        } else {
          let songshiIndex = parseInt(window.localStorage.getItem('songshi_index'))
          if (songshiIndex < 254237) {
            window.localStorage.setItem('songshi_index', songshiIndex + 1)
            this.index = 1
            this.changeUrl()
          }
        }
      }
    }
  }
</script>
<style scoped>
  .word-width {
    letter-spacing: 8px;
  }
</style>
